<template>
	<view style="display: flex;flex: 1;align-items: center;" :class="_keys.disabled?'disabled':''" @click="click">
		<input @change="(_keys.change || (e=>e))(value)" :maxlength="_keys.maxlength || -1" class="input" :disabled="_keys.disabled" :type="_keys.type" :value="value" @input="updateValue" :placeholder="_keys.placeholder" />
		<text v-show="_keys.unit" style="margin-left:.5em;">{{_keys.unit}}</text>
	</view>
</template>

<script>
	export default {
		name:"yInput",
		props: {
			value: '',
			keys: {}
		},
		data() {
			return {}
		},
		computed:{
			_keys(){
				return {
					disabled:false,
					type:'text',
					placeholder:"请输入",
					...this.keys
				}
			}
		},
		methods: {
			updateValue(e) {
				//检测类型
				typeof this._keys.change === "function" && this._keys.change(e.target.value);
				//整数 Integer
				this.$emit('input', e.target.value);
			},
			click(e){
				typeof this._keys.click === "function" && this._keys.click();
			}
		}
	}
</script>

<style lang="scss">
	.input {
		font-size: inherit;
		margin-left: .5em;
		flex: 1;
	}
	.disabled{
		
	}
</style>
